<template>
  <div>
    <div class="tr" v-for="item in list" :key="item.id">
      <div class="td">
        <input type="checkbox" v-model="item.checked" />
        <!-- 引用类型 写在哪里都无所谓 -->
      </div>
      <div class="td">
        {{ item.goodsname }}
      </div>
      <div class="td">
        {{ item.goodsprice }}
      </div>
      <div class="td">
        <button v-show="item.goodsnum > 1" @click="calc(item, -1)">-</button>
        {{ item.goodsnum }}
        <button @click="calc(item, 1)">+</button>
      </div>
      <div class="td">
        {{ item.goodsnum * item.goodsprice }}
      </div>
      <div class="td" @click="del(item.id)">删除</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["list"],
  methods: {
    calc(item, num) {
      this.$emit("calc", {
        item,
        num,
      }); //emit里面的才是自定义事件
      //有多个参数  需要合并成对象
    },
    del(id) {
      this.$emit("delListById", id);
    },
  },
};
</script>

<style></style>
